<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/login.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/jquery.form.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/login.js" charset="UTF-8"></script>
	<script src="js/axios.js" charset="UTF-8"></script>
	<script src="js/vue.min.js" charset="UTF-8"></script>
	<script src="js/api.js" charset="UTF-8"></script>
	<title>XXX - 登录 / 注册</title>
	<style>
		/*.box{*/
		/*	width: 300px;*/
		/*	height: 50px;*/
		/*	border: 1px pink solid;*/
		/*	margin-bottom: 10px;*/
		/*	text-align: center;*/
		/*}*/
		/*#imageCode{*/
		/*	height: 100%;*/
		/*	display: inline-block;*/
		/*	!*margin-left: 150px;*!*/
		/*	!*margin-bottom: 60px;*!*/
		/*}*/
		/*.myInput{*/
		/*	width: 50%;*/
		/*	display: inline;*/
		/*	margin-right: 200px;*/
		/*}*/
	</style>
</head>
<body>
	<div id="app">
		<div class="public-head-layout container">
			<a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="XXX" class="cover"></a>
		</div>
		<div style="background:url(images/login_bg.jpg) no-repeat center center; ">
			<div class="login-layout container">
				<div class="form-box login">
					<div class="tabs-nav">
						<h2>欢迎登录XXX平台</h2>
					</div>
					<div class="tabs_container">
						<form class="tabs_form" action="" method="post" id="login_form">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
									</div>
									<input class="form-control phone" name="phone" id="login_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
									</div>
									<input class="form-control password"name="password" id="login_pwd" placeholder="请输入密码" autocomplete="off" type="password">
									<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
								</div>
							</div>
							<div class="checkbox">
								<label>
									<input checked="" id="login_checkbox" type="checkbox"><i></i> 30天内免登录
								</label>
								<a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
							</div>
							<!-- 错误信息 -->
							<div class="form-group">
								<div class="error_msg" id="login_error">
									<!-- 错误信息 范例html
                                    <div class="alert alert-warning alert-dismissible fade in" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <strong>密码错误</strong> 请重新输入密码
                                    </div>
                                     -->
								</div>
							</div>
							<button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button">登录</button><br>
							<p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
						</form>
						<div class="tabs_div">
							<div class="success-box">
								<div class="success-msg">
									<i class="success-icon"></i>
									<p class="success-text">登录成功</p>
								</div>
							</div>
							<div class="option-box">
								<div class="buts-title">
									现在您可以
								</div>
								<div class="buts-box">
									<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
									<a role="button" href="udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-box register">
					<div class="tabs-nav">
						<h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
					</div>

					<div class="tabs_container">
						<form class="tabs_form" action="" method="post" id="register_form">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
									</div>
									<input class="form-control phone" v-model="userInfo.phone" name="phone" id="register_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<input class="form-control" v-model="userInfo.validateCode" name="smscode" id="register_sms" placeholder="输入验证码" type="text">
									<span class="input-group-btn">
									<button class="btn btn-primary getsms" @click="sendSmsCode" type="button">发送短信验证码</button>
								</span>
								</div>
							</div>
							<!--图形验证码-->
							<div class="input-group-addon" >
								<input class="input-group" type="text" value="" v-model="userInfo.imageCode"  name="verify" placeholder="图形验证码" style="width:100px;" />
								<div id="imageCode">
									<image :src="imageCode"  style="margin-left: 10px" @click="getImageCode"></image>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
									</div>
									<input class="form-control password" v-model="userInfo.password" name="password" id="register_pwd" placeholder="请输入密码" autocomplete="off" type="password">
									<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
								</div>
							</div>
							<div class="checkbox">
								<label>
									<input checked="" id="register_checkbox" type="checkbox"><i></i> 同意<a href="temp_article/udai_article3.html">XXX用户协议</a>
								</label>
							</div>

							<!-- 错误信息 -->
							<div class="form-group">
								<div class="error_msg" id="register_error"></div>
							</div>
							<button class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit" @click="register" type="button">注册</button>
						</form>
						<div class="tabs_div">
							<div class="success-box">
								<div class="success-msg">
									<i class="success-icon"></i>
									<p class="success-text">注册成功</p>
								</div>
							</div>
							<div class="option-box">
								<div class="buts-title">
									现在您可以
								</div>
								<div class="buts-box">
									<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
									<a role="button" href="udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-box resetpwd">
					<div class="tabs-nav clearfix">
						<h2>找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
					</div>
					<div class="tabs_container">
						<form class="tabs_form" method="post" id="resetpwd_form">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
									</div>
									<input class="form-control phone" name="phone" id="resetpwd_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<input class="form-control" name="sms" id="resetpwd_sms" placeholder="输入验证码" type="text">
									<span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送短信验证码</button>
								</span>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
									</div>
									<input class="form-control password" name="password" id="resetpwd_pwd" placeholder="新的密码" autocomplete="off" type="password">
									<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
								</div>
							</div>
							<!-- 错误信息 -->
							<div class="form-group">
								<div class="error_msg" id="resetpwd_error"></div>
							</div>
							<button class="btn btn-large btn-primary btn-lg btn-block submit" id="resetpwd_submit" type="button">重置密码</button>
						</form>
						<div class="tabs_div">
							<div class="success-box">
								<div class="success-msg">
									<i class="success-icon"></i>
									<p class="success-text">密码重置成功</p>
								</div>
							</div>
							<div class="option-box">
								<div class="buts-title">
									现在您可以
								</div>
								<div class="buts-box">
									<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
									<a role="button" href="login.html" class="btn btn-block btn-lg btn-info">返回登陆</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<script>
					$(document).ready(function() {
						// 判断直接进入哪个页面 例如 login.php?p=register
						switch($.getUrlParam('p')) {
							case 'register': $('.register').show(); break;
							case 'resetpwd': $('.resetpwd').show(); break;
							default: $('.login').show();
						};
						// 发送验证码事件
						$('.getsms').click(function() {
							var phone = $(this).parents('form').find('input.phone');
							var error = $(this).parents('form').find('.error_msg');
							switch(phone.validatemobile()) {
								case 0:
									// 短信验证码的php请求
									error.html(msgtemp('验证码 <strong>已发送</strong>','alert-success'));
									$(this).rewire(60);
									break;
								case 1: error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码',    'alert-warning')); break;
								case 2: error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码','alert-warning')); break;
								case 3: error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码',  'alert-warning')); break;
							}
						});
						// 以下确定按钮仅供参考
						$('.submit').click(function() {
							var form = $(this).parents('form')
							var phone = form.find('input.phone');
							var pwd = form.find('input.password');
							var error = form.find('.error_msg');
							var success = form.siblings('.tabs_div');
							var options = {
								beforeSubmit: function () {
									console.log('喵喵喵')
								},
								success: function (data) {
									console.log(data)
								}
							}
							// 验证手机号参考这个
							switch(phone.validatemobile()) {
								case 1: error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码',    'alert-warning')); return; break;
								case 2: error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码','alert-warning')); return; break;
								case 3: error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码',  'alert-warning')); return; break;
							}
							// 验证密码复杂度参考这个
							switch(pwd.validatepwd()) {
								case 1: error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码',    'alert-warning')); return; break;
								case 2: error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码','alert-warning')); return; break;
								case 3: error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合',  'alert-warning')); return; break;
							}
							form.ajaxForm(options);
							// 请求成功执行类似这样的事件
							// form.fadeOut(150,function() {
							// 	success.fadeIn(150);
							// });
						})
					});
				</script>
			</div>
		</div>
		<div class="footer-login container clearfix">
			<ul class="links">
				<a href=""><li>网店代销</li></a>
				<a href=""><li>U袋学堂</li></a>
				<a href=""><li>联系我们</li></a>
				<a href=""><li>企业简介</li></a>
				<a href=""><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2005-2017 XXX 版权所有，并保留所有权利<br>
				ICP备案证书号：闽ICP备XXX号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市XXX&nbsp;&nbsp;&nbsp;&nbsp;Tel: XXX&nbsp;&nbsp;&nbsp;&nbsp;E-mail: XXX@qq.com
			</p>
		</div>
	</div>

	<script type="text/javascript">
		new Vue({
			el: '#app',
			data(){
				return {
					imageCode: '',
					imageCodePrefix: 'data:image/jpeg;base64,',
					userInfo:{
						phone:'',
						//手机验证码
						validateCode:'',
						password:''
					}
				}
			},
			mounted(){
				this.getImageCode()
			},
			methods:{
				sendSmsCode(){
					let phone = this.userInfo.phone;
					console.log(phone)
					this.$http.get('/user/user/validCode/register/'+phone)
					.then((res) => {
						console.log(res)
					})
				},
				register(){
					let userInfo = this.userInfo;
					this.$http.post('/user/user/register/phone',userInfo).then((res) => {
						console.log(res)
						// window.location.href = "/login.html"
					})
				},
				createUuid(){
					var s = [];
					var hexDigits = "0123456789abcdefghi";
					for (var i = 0; i < 36; i++) {
						s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
					}
					s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
					s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
					s[8] = s[13] = s[18] = s[23] = "-";

					var uuid = s.join("");
					return uuid;
				},
				getImageCode(){
					//发送请求到后台获取数据  VerifycodeController
					let imageCodeKey = sessionStorage.getItem("registerImageCodeKey");
					if(!imageCodeKey || imageCodeKey === ''){
						imageCodeKey = this.createUuid();
						sessionStorage.setItem("registerImageCodeKey",imageCodeKey);
					}
					this.$http.get("/user/user/image/"+imageCodeKey).then(res=>{
						//base64要转为图片要加前缀
						this.imageCode = this.imageCodePrefix + res.data.data;
					})
				}
			}
		})
	</script>
</body>
</html>